<template>
  <div class="mobile">
    <div class="content">
      <div class="box">
        <div class="title">请输入您的手机号码</div>
        <div class="form-group">
          <div class="form-input">
            <input
              :class="{err:errText}"
              type="number"
              maxlength="11"
              :placeholder="placeholder"
              v-model="mobile"
              @focus="focus"
              @blur="blur"
            >
          </div>
          <div class="label" v-if="!valid">{{errText}}</div>
        </div>
      </div>
    </div>
    <div class="submit active" :class="{disabled: disabled}" v-if="valid" @click="submit">完成</div>
    <div class="submit" v-else>完成</div>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
import { submitInfo } from "@/assets/js/api";
import { setTimeout } from "timers";
import Utils from "@/assets/js/utils";
export default {
  data() {
    return {
      errText: "",
      mobile: "",
      valid: false,
      disabled: false,
      placeholder: "手机号码"
    };
  },
  created() {
    this.submitAnswer();
  },
  mounted() {
    window.scrollTo(0, 0);
    // this.changeOver();
  },
  computed: {
    ...mapState({
      answers: state => state.answers
    })
  },
  methods: {
    ...mapMutations({
      changeOver: "changeOver",
      changeMobile: "changeMobile"
    }),
    focus() {
      this.placeholder = "";
    },
    submitAnswer() {
      // SubmitInfo({ answers: this.answers });
    },
    isNull: function(value) {
      //验证是否为空
      if (value == null || value == "" || !/\s/.test(value)) {
        return true;
      }
      return false;
    },
    blur() {
      if (this.isNull(this.mobile)) {
        this.placeholder = "手机号码";
      }
    },
    submit() {
      this.changeMobile(this.mobile);
      this.disabled = true;
      setTimeout(() => {
        submitInfo({ answers: this.answers, mobile: this.mobile });
        this.disabled = false;
        location.href = "/MP-Survey/index.html#/thank";
        // location.href = "/chanel/MP-Survey/index.html#/thank";

        // this.$router.push("/thank");
      });
    }
  },
  watch: {
    mobile(newVal) {
      this.errText = "";
      if (newVal.length > 11) {
        this.mobile = newVal.slice(0, 11);
      }
      if (newVal.length === 11) {
        if (/^1[3456789]\d{9}$/.test(newVal)) {
          this.valid = true;
        } else {
          this.valid = false;
          this.errText = "手机号码有误，请重新输入";
        }
      } else {
        this.valid = false;
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.mobile {
  width: 327px;
  height: 100%;
  padding-bottom: 48px;
  margin: 0 auto;
  box-sizing: border-box;

  .submit {
    background: #c1c1c1;
    color: #fff;
    width: 327px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;

    &.active {
      background: #000;
    }

    &.disabled {
      pointer-events: none;
    }
  }

  .content {
    height: calc(100% - 48px);
    display: flex;
    justify-content: center;
    align-items: center;

    .box {
      width: 327px;
      height: 110px;
    }

    .title {
      font-size: 18px;
      line-height: 18px;
      margin-bottom: 24px;
      text-align: center;
      font-family: PingFangSC-Medium, 'PingFangM';
    }

    .form-group {
      .form-input {
        input {
          display: block;
          width: 100%;
          height: 44px;
          border: 1px solid #d6d6d6;
          box-sizing: border-box;
          padding: 0 12px;
          font-size: 14px;

          &:focus {
            border-color: #000;
          }

          &.err {
            border-color: red;
          }
        }
      }

      .label {
        font-size: 12px;
        line-height: 12px;
        margin-top: 12px;
        color: red;
      }
    }
  }
}
</style>

